<template>
    <div class="table">
        <div class="container">
            <div>
                <el-button type="warning" size="medium" class="handle-del mr10" @click="add">新增</el-button>
                <el-button type="primary" size="medium" class="handle-del mr10" @click="query">查询</el-button>
            </div>
            <el-row class="input-suffix">
                <el-col :span="12">
                    姓名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <el-input size="medium" v-model="fullName" placeholder="请输入姓名" prefix-icon="el-icon-search"
                              class="handle-input mr10"></el-input>
                </el-col>
            </el-row>
            <el-table :data="tableData" border class="table" ref="multipleTable"
                      @selection-change="handleSelectionChange"
                      v-loading="loading"
                      element-loading-text="拼命加载中"
                      element-loading-spinner="el-icon-loading"
                      element-loading-background="rgba(0, 0, 0, 0.8)">
                <el-table-column prop="userCode" label="用户名" align="center" width="auto">
                </el-table-column>
                <el-table-column prop="fullName" label="姓名" align="center" width="auto">
                </el-table-column>
                <el-table-column prop="company" label="所属公司" align="center" width="auto">
                </el-table-column>
                <el-table-column prop="eosCode" label="所属部门" align="center" width="auto">
                </el-table-column>
                <el-table-column prop="status" label="状态" align="center" width="auto" :formatter="statusformat">
                </el-table-column>
                <el-table-column prop="startDate" label="启用日期" align="center" width="auto">
                </el-table-column>
                <el-table-column prop="endDate" label="结束日期" align="center" width="auto">
                </el-table-column>
                <el-table-column label="操作" width="auto" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" class="blue" @click="handleUpPw(scope.$index, scope.row)">
                            重置密码
                        </el-button>
                        <el-button type="text" size="mini" class="blue" @click="handleEdit(scope.$index, scope.row)">
                            修改
                        </el-button>
                        <el-button type="text" size="mini" class="red" @click="handleDelete(scope.$index, scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background
                               layout="total,prev, pager, next"
                               :page-size="pageSize"
                               :total="totallRows"
                               :current-page="currentPageNo"
                               @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog title="用户信息" :visible.sync="editVisible" width="60%">
            <el-form ref="form" :model="userEntity" label-width="100px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="*用户Code" class="redItem">
                            <el-input :disabled="disabled" clearable v-model="userEntity.userCode" placeholder="请输入用户名"
                                      size="medium"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="状态">
                            <el-select v-model="userEntity.status" placeholder="请选择">
                                <el-option key="1" label="启用" value=0></el-option>
                                <el-option key="0" label="停用" value=1></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="*姓名" class="redItem">
                            <el-input :disabled="disabled" v-model="userEntity.fullName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="性别">
                            <el-radio-group v-model="userEntity.entitySex">
                                <el-radio label=0>男</el-radio>
                                <el-radio label=1>女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="启用日期">
                            <el-date-picker v-model="userEntity.startDate" :picker-options="startDate" type="date"
                                            placeholder="选择日期"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="公司">
                            <el-input v-model="userEntity.company"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="结束日期">
                            <el-date-picker v-model="userEntity.endDate" :picker-options="endDate" type="date"
                                            placeholder="选择日期"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="部门">
                            <el-input v-model="userEntity.eosCode"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="文件配额">
                            <form action="RegServlet" method="post" enctype="multipart/form-data">
                                <input type="file" name="MB"/><br/>
                            </form>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="权限组">
                            <el-select v-model="userEntity.isAdmin" placeholder="请选择">
                                <el-option key="1" label="管理员" value=1></el-option>
                                <el-option key="0" label="普通用户" value=0></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="">
                            <el-radio v-model="userEntity.ipset" label=1 class="blueItem">启用IP限制</el-radio>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="">
                            <el-radio v-model="userEntity.macset" label=1>启用网卡限制</el-radio>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="">
                            <el-input clearable v-model="userEntity.ipinit" placeholder="请输入IP，多个IP使用逗号隔开。"
                                      type="textarea" size="medium"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="">
                            <el-input clearable v-model="userEntity.macinit" placeholder="请输入MAC,多个MAC使用逗号隔开。"
                                      type="textarea" size="medium"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="">
                            <el-radio v-model="userEntity.denySendmsg" label=1>禁用发送消息</el-radio>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="">
                            <el-radio v-model="userEntity.denyPwdstr" label=1>关闭口令强度限制</el-radio>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="">
                            <el-radio v-model="userEntity.denyMain" label=1>禁用系统维护相关项</el-radio>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-row>
                   <el-col :span="12">
                        <el-button type="primary" @click="saveEdit" :plain="true">保存</el-button>
                    </el-col>
                    <el-col :span="5">
                        <el-button @click="editVisible = false">关闭</el-button>
                    </el-col>
                   </el-row>
            </span>
        </el-dialog>

        <!--密码修改弹框-->
        <el-dialog title="修改密码" :visible.sync="changePasswordVisible" width="60%">
            <el-form ref="form" :model="passwordEntity" label-width="100px">
                <el-form-item label="旧密码">
                    <el-input clearable v-model="passwordEntity.oldPassword" placeholder="请输入旧密码"
                              size="medium" @blur="InputBlurEvent"></el-input>
                </el-form-item>
                <el-form-item label="">
                    <p :model="passwordEntity.warnMsg" class="redItem"></p>
                </el-form-item>
                <el-form-item label="新密码">
                    <el-input clearable v-model="passwordEntity.newPassword" placeholder="请输入新密码"
                              size="medium"></el-input>
                </el-form-item>
                <el-form-item></el-form-item>
                <el-form-item label="确认新密码">
                    <el-input clearable v-model="passwordEntity.surePassword" placeholder="请确认密码"
                              size="medium"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-row>
                   <el-col :span="12">
                        <el-button type="primary" @click="saveEditChangePassword" :plain="true">保存</el-button>
                    </el-col>
                    <el-col :span="5">
                        <el-button @click="changePasswordVisible = false">关闭</el-button>
                    </el-col>
                   </el-row>
            </span>
        </el-dialog>

        <!--&lt;!&ndash; 删除提示框 &ndash;&gt;-->
        <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {
        getAllUsers_Url, changeUsers_Url, delUsers_Url
        , changePassword_Url
    } from "@/config/api";

    //import axios from 'axios'
    //import {truncate} from 'fs';
    //import ElDatePicker from "element-ui/packages/date-picker/src/picker/date-picker";

    export default {
        //components: {ElDatePicker},
        name: 'usermanager',
        data() {
            return {
                fullName: '',
                projectName: '',
                companyName: '',
                eosName: '',
                totallRows: 0, /* 总数据行数 */
                pageSize: 10, /* 当前页数据显示条数 */
                currentPageNo: 1, /* 当前页码 */
                loading: true,
                status: '',
                disabled: false,
                changePasswordVisible: false,
                passwordEntity: {
                    oldPassword: '',/*旧密码*/
                    newPassword: '',/*新密码*/
                    surePassword: '',/*确认新密码*/
                    warnMsg: ''
                },
                userEntity: {
                    /* 编辑弹框 */
                    userId: '',/*人员信息主键*/
                    userCode: '',/*用户名*/
                    fullName: '',/*姓名*/
                    password: '',/*密码*/
                    entitySex: '',/*性别*/
                    status: '',/*状态*/
                    startDate: '',/*启用日期*/
                    endDate: '',/*结束日期*/
                    projectId: '',/*所属工程Id*/
                    company: '',/*所属公司code*/
                    eosCode: '',/*所属部门code*/
                    eosPart: '',/*兼职部门*/
                    upfileQuota: '',/*文件配额（限制上传文件大小）*/
                    denySendmsg: '',/*禁止发消息（0：否，1：是）*/
                    denyPwdstr: '',/*受否允许弱密码强度（0：否，1：是）*/
                    denyMain: '',/*禁止系统维护项（0：否，1：是）*/
                    ipset: '',/*启用IP限制（0：否，1：是）*/
                    ipinit: '',/*IP地址多个*/
                    macset: '',/*启用MAC地址*/
                    macinit: '',/*MAC地址*/
                    isAdmin: ''
                },
                tableData: [],
                multipleSelection: [],
                editVisible: false,
                delVisible: false,
                idx: -1,
                isadd: false,
                // 日期输入框限制结束日期大于开始日期
                startDate: {
                    disabledDate: time => {
                        if (this.userEntity.endDate) {
                            return (
                                time.getTime() > new Date(this.userEntity.endDate).getTime()
                            );
                        }
                    }
                },
                endDate: {
                    disabledDate: time => {
                        if (this.userEntity.startDate) {
                            return (
                                time.getTime() < new Date(this.userEntity.startDate).getTime()
                            );
                        }
                    }
                }
            }
        },
        created() {
            this.getData();
        },
        computed: {
            data() {

            }
        },
        methods: {
            // 分页导航
            handleCurrentChange(val) {
                this.currentPageNo = val;
                this.getData();
            },
            statusformat(row, column) {
                if (row.status === 1) {
                    return '停用'
                } else if (row.status === 0) {
                    return '启用'
                }

            },
            // 页面加载数据
            getData() {
                getAllUsers_Url({
                    fullName: this.fullName,
                    pageNo: this.currentPageNo
                }).then(res => {
                    console.log("分页查询人员数据======>>>" + JSON.stringify(res.data));
                    this.tableData = res.data.records;
                    this.totallRows = res.data.rowCount;
                    this.currentPageNo = res.data.pageNow;
                    this.loading = false;
                })
            },
            /* 查询事件 */
            query() {
                this.getData();
            },
            /* 添加弹框 */
            add() {
                this.status = 0;
                this.disabled = false;
                this.editVisible = true;
                this.isadd = true;
                this.userEntity = {
                    /* 编辑弹框 */
                    userId: '',/*人员信息主键*/
                    userCode: '',/*用户名*/
                    fullName: '',/*姓名*/
                    password: '',/*密码*/
                    entitySex: '0',/*性别*/
                    status: '',/*状态*/
                    startDate: '',/*启用日期*/
                    endDate: '',/*结束日期*/
                    projectId: '',/*所属工程Id*/
                    company: '',/*所属公司code*/
                    eosCode: '',/*所属部门code*/
                    eosPart: '',/*兼职部门*/
                    upfileQuota: '',/*文件配额（限制上传文件大小）*/
                    denySendmsg: '',/*禁止发消息（0：否，1：是）*/
                    denyPwdstr: '',/*受否允许弱密码强度（0：否，1：是）*/
                    denyMain: '',/*禁止系统维护项（0：否，1：是）*/
                    ipset: '',/*启用IP限制（0：否，1：是）*/
                    ipinit: '',/*IP地址多个*/
                    macset: '',/*启用MAC地址*/
                    macinit: '',/*MAC地址*/
                    isAdmin: ''
                }
            },
            /* 点击修改事件 */
            handleEdit(index, row) {
                this.disabled = true;
                this.status = 1;
                this.isadd = false;
                this.idx = index;
                this.userEntity = this.tableData[index];
                this.editVisible = true;
            },
            /* 删除事件 */
            handleDelete(index, row) {
                this.idx = index;
                this.delVisible = true;
            },
            /* 当选择项发生改变时触发该事件 */
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            /* 确定新增/修改保存事件 */
            saveEdit() {
                if (this.status == 0) {/* 新增数据 */
                    if (this.userEntity.userCode == '' || this.userEntity.userCode == null ||
                        this.userEntity.fullName == '' || this.userEntity.fullName == null) {
                        this.$message(' * 标注为必填内容!!!');
                        return false;
                    } else {
                        changeUsers_Url(
                            this.userEntity
                        ).then(res => {
                            console.log("测试添加数据后返回的状态值======>>>" + JSON.stringify(res.data))
                            if (res.data.data == true) {
                                this.$message(' 恭喜你，数据添加成功！！！');
                                this.getData();
                                this.editVisible = false;
                            } else {
                                this.$message(' 很遗憾，数据添加失败！！！');
                                this.editVisible = false;
                            }
                        })
                    }
                } else {/* 修改数据 */
                    changeUsers_Url(
                        this.userEntity
                    ).then(res => {
                        console.log("测试修改数据后返回的状态值======>>>" + JSON.stringify(res.data));
                        if (res.data.success) {
                            this.editVisible = false;
                            this.getData();
                            this.$message.success(`修改第 ${this.idx + 1} 行成功`);
                        } else {
                            this.$message.error()(`修改第 ${this.idx + 1} 行失败`);
                        }
                    })
                }
            },
            /*修改密码弹框*/
            handleUpPw(index, row) {
                this.changePasswordVisible = true;
                this.idx = index;
                this.userEntity = this.tableData[index]
            },
            /* 确定删除事件 */
            deleteRow() {
                delUsers_Url({
                    user_id: this.tableData[this.idx].userId
                }).then(res => {
                    console.log("删除返回之后的状态======>>>" + JSON.stringify(res.data))
                    if (res.data.success) {
                        this.$message.success('删除成功');
                        this.getData();
                        this.delVisible = false;
                    } else {
                        this.$message.error()(`删除失败`);
                    }
                })
            },
            /*文本框失去焦点触发事件*/
            /**
             * @return {boolean}
             */
            InputBlurEvent() {
                if (this.passwordEntity.oldPassword === '' || this.passwordEntity.oldPassword == null) {
                    return false;
                } else {
                    console.log("-----------> request changePwd again : " + this.userEntity.userId);
                    changePassword_Url({
                        userId: this.userEntity.userId,
                        oldPassword: this.passwordEntity.oldPassword,
                        newPassword: this.passwordEntity.newPassword
                    }).then(res => {
                        console.log("旧密码查询返回的状态======>>>" + JSON.stringify(res.data))
                    })
                }
            },
            /*密码修确定提交事件*/
            saveEditChangePassword() {
                if (this.passwordEntity.oldPassword == '' || this.passwordEntity.oldPassword == null ||
                    this.passwordEntity.newPassword == '' || this.passwordEntity.newPassword == null ||
                    this.passwordEntity.surePassword == '' || this.passwordEntity.surePassword == null) {
                    this.$message(' 输入框不能为空!!!');
                    return false;
                }
                if (this.passwordEntity.newPassword === this.passwordEntity.surePassword && "旧密码输入正确".match(this.passwordEntity.warnMsg)) {
                    console.log("-----------> the user id is : " + this.userEntity.userId);
                    changePassword_Url({
                        userId: this.userEntity.userId,
                        oldPassword: this.passwordEntity.oldPassword,
                        newPassword: this.passwordEntity.newPassword
                    }).then(res => {
                        console.log("旧密码查询返回的状态======>>>" + JSON.stringify(res.data));
                        if (res.data.success) {
                            this.$message.success('密码修改成功！！！');
                            this.changePasswordVisible = false;
                        } else {
                            this.$message.error(`密码修改失败`);
                            this.changePasswordVisible = false;
                        }
                    })
                } else {
                    this.$message(' 两次输入不一致!!!');
                    return false;
                }
            }

        }
    }

</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }

    .del-dialog-cnt {
        font-size: 16px;
        text-align: center
    }

    .table {
        width: 100%;
        font-size: 14px;
    }

    .red {
        color: #ff0000;
    }

    .mr10 {
        margin-right: 10px;
    }

    .input-suffix {
        margin: 10px;
    }

    .label {
        margin-right: 50px;
    }
</style>
